<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绘制一个卡券</title>
    <style>
        .center-circle {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at 0px 50px, transparent 10px, #00adb5 5px) left / 51% 100% no-repeat,
            radial-gradient(circle at 100% 50px, transparent 10px, #00adb5 5px) right / 51% 100% no-repeat;
            /* background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 5px) right / 50% 100% no-repeat; */
        
            /* 添加阴影 */
            filter: drop-shadow(1px 1px 2px rgb(51, 51, 51));
        }
    </style>
</head>

<body>

    <div class="center-circle">

    </div>


</body>

</html>